<template>
	<view class="page-main">
		<pull-down-page ref="pullDownPage" :scrollStyle="['height:calc(100vh - 80px)']" :subsectionList="subsectionList"
			@pullDownRefresh="pullDownRefresh" @sectionChange="onSectionChange" @scrolltolower="onTaskList">
			<template slot="swiper-item-0">
				<u-empty mode="data" icon="/static/data.png" v-if="list.length==0" />
				<view class="card-list" v-for="(item, index) in list" :key="index">
					<view class="head">
						<view class="left">
							<view class="circular" :style="'background-color:'+level[item.level]" />
						</view>
						<view class="right del-box">
							<u-icon name="trash" size="26" @click="onDelete(item)" />
						</view>
					</view>
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.taskImages||'/static/renwu.png'" shape="circle"
									width="80px" height="80px"
									@click="onPopupImages(item.taskImages||'/static/renwu.png')" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.taskContent" />
									</view>
									<view class="main-integral">
										<u--text :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 5px;" />
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text v-if="item.total>1" :text="item.completed+'/'+item.total+'次'" align="center">
								</u--text>
								<u--text v-else :text="item.total+'次'" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.createTime" prefixIcon="/static/kaishi.png"
								iconStyle="width: 22px;height: 22px;;margin-right: 3px;">
							</u--text>
						</view>
						<view class="edit-box right">
							<u-button type="success" size="small" text="修改" @click="onEdit(item)" />
						</view>
					</view>
				</view>
			</template>
			<template class="fixed-add-button" slot="fixed-button-0">
				<u-button type="success" size="large" text="下发新任务" @click="onAdd()" />
			</template>

			<template slot="swiper-item-1">
				<u-empty mode="data" icon="/static/data.png" v-if="historyList.length==0" />
				<view class="card-list" v-for="(item, index) in historyList" :key="index">
					<view class="head">
						<view class="left">
							<view class="circular" :style="'background-color:'+level[item.level]" />
						</view>
					</view>
					<view class="main">
						<u-row customStyle="position: relative;">
							<u-col span="3">
								<u--image :showLoading="true" :src="item.taskImages||'/static/renwu.png'" shape="circle"
									width="80px" height="80px"
									@click="onPopupImages(item.taskImages||'/static/renwu.png')" />
							</u-col>
							<u-col span="7">
								<view>
									<view class="main-title">
										<u--text :text="item.taskContent" />
									</view>
									<view class="main-integral">
										<u--text :text="item.integral" prefixIcon="integral-fill"
											iconStyle="color:#ffaaff;margin-right: 5px;" />
									</view>
								</view>
							</u-col>
							<u-col span="2">
								<u--text v-if="item.total>1" :text="item.completed+'/'+item.total+'次'" align="center" />
								<u--text v-else :text="item.total+'次'" align="center" />
							</u-col>
						</u-row>
					</view>
					<view class="tail">
						<view class="left">
							<u--text :text="item.completedTime" prefixIcon="/static/jieshu.png"
								iconStyle="width: 22px;height: 22px;margin-right: 3px;" />
						</view>
						<view class="edit-box right">
							<u-button v-if="item.status==2" type="success" size="small" text="检验"
								@click="onTestTask(item)" />
							<u-button v-else type="warning" size="small" text="重置" @click="onReset(item)" />
						</view>
					</view>
				</view>
			</template>

		</pull-down-page>

		<u-modal :show="showModal" title="任务得分" showCancelButton @cancel="showModal=false" @confirm="onModalConfirm">
			<u--form labelPosition="left" labelWidth="auto">
				<u-form-item label="完成图片(点击放大):" borderBottom>
					<u--image :showLoading="true" :src="modalForm.images" width="260rpx" height="160rpx"
						mode="aspectFit" @click="onPopupImages(modalForm.images)">
						<view slot="error" v-if="modalForm.images" style="font-size: 25rpx;">加载失败</view>
						<view slot="error" v-else style="font-size: 25rpx;">无图片</view>
					</u--image>
				</u-form-item>
				<u-form-item label="可得亲密值:" borderBottom>
					<u-slider style="width: 350rpx;" @changing="onSliderChanging" />
					<u--text :text="modalForm.integral" style="width: 50px;" />
				</u-form-item>
			</u--form>
		</u-modal>

		<u-popup :show="showImages" @close="showImages=false" mode="center" bgColor="transparent" overlayOpacity="0.8">
			<u--image :showLoading="true" width="100vw" height="100vh" mode="aspectFit" :src="popupImages"
				@click="showImages=false" />
		</u-popup>
	</view>
</template>

<script>
	import pullDownPage from '@/components/myCustom/pull-down-page'

	export default {
		components: {
			pullDownPage
		},
		data() {
			return {
				list: [],
				historyList: [],
				subsectionList: ['未完成的任务', '已完成的任务'],
				swiperIndex: 0,
				level: ["#2979ff", "#19be6b", "#f5f509", "#ff9900", "#fa3534"],
				showImages: false,
				popupImages: '',
				showModal: false,
				modalForm: {
					id: 0,
					completedById: 0,
					images: '',
					total: 0,
					integral: 0
				},
				currentPage: [1, 1], //当前页数
				pageSize: 10, //每页数据条数
				totalData: [1, 1], //数据总数
				tmpInsert: [0, 0], //零时插入的数据条数
				isRefresh: [false,false]
			}
		},
		onLoad() {
			this.onTaskList(this.swiperIndex);
		},
		methods: {
			pullDownRefresh(swiperIndex) {
				this.isRefresh[swiperIndex] = true
				this.currentPage[swiperIndex] = 1
				this.totalData[swiperIndex] += 10
				this.onTaskList(swiperIndex)
			},
			onSectionChange(swiperIndex) {
				this.swiperIndex = swiperIndex
				this.onTaskList(swiperIndex)
			},
			onTaskList(swiperIndex) {
				const total = this.totalData[swiperIndex],
					currentPage = this.currentPage[swiperIndex],
					user = this.vuex_user
				if (swiperIndex == 0 && total > this.list.length) {
					this.$http.get("/taskList/page", {
						userId: user.id,
						status: 0,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh[swiperIndex]) {
							this.isRefresh[swiperIndex] = false
							this.list = data.records
						} else {
							this.list.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total
						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
						uni.$u.toast(err.message)
					});
				} else if (swiperIndex == 1 && total > this.historyList.length) {
					this.$http.get("/taskList/page", {
						userId: user.id,
						status: 2,
						page: currentPage,
						size: this.pageSize
					}).then((res) => {
						let data = res.data
						if (this.isRefresh[swiperIndex]) {
							this.isRefresh[swiperIndex] = false
							this.historyList = data.records
						} else {
							this.historyList.push(...data.records)
						}
						this.currentPage[swiperIndex] += 1
						this.totalData[swiperIndex] = data.total

						this.$refs.pullDownPage.stopRefresh();
					}).catch((err) => {
						this.$refs.pullDownPage.stopRefresh();
						uni.$u.toast(err.message)
					});
				}

			},
			onAdd() {
				uni.navigateTo({
					url: '/pages/tasklist/editTask/editTask'
				});
			},
			onEdit(item) {
				uni.navigateTo({
					url: `/pages/tasklist/editTask/editTask?id=${item.id}`
				});
			},
			onTestTask(item) {
				this.modalForm.id = item.id
				this.modalForm.completedById = item.completedById
				this.modalForm.images = item.images
				this.modalForm.integral = item.integral
				this.modalForm.total = item.integral
			},
			onModalConfirm() {
				uni.showLoading({
					title: '操作中',
					mask: true
				});
				const update = {
					id: this.modalForm.id,
					integral: this.modalForm.integral,
					status: 3
				}
				this.$http.post("/taskList/update", update)
					.then((res) => {
						const index = this.historyList.findIndex(item => item.id === this.modalForm.id)
						Object.assign(this.historyList[index], update)

						uni.hideLoading();
						uni.$u.toast('操作成功');
					}).catch((err) => {
						uni.hideLoading();
						uni.$u.toast(err.message);
					})

			},
			onReset(item) {
				uni.showModal({
					title: "提示",
					content: "重置将清空已完成任务，确定要重置吗？",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '重置中',
								mask: true
							});
							this.$http.post("/taskList/resetTask", {
								id: item.id
							}).then((res) => {
								let index = this.historyList.findIndex(e => e.id === item.id),
									tmpObject = this.historyList.slice(index, 1)

								Object.assign(tmpObject, {
									createTime: uni.$u.timeFormat(new Date(),
										'yyyy-mm-dd hh:MM:ss'),
									completedTime: null,
									images: null,
									completed: 0,
									status: 0
								})
								this.list.unshift(tmpObject)
								uni.hideLoading();
								uni.$u.toast('重置成功');
							}).catch((err) => {
								uni.hideLoading();
								uni.$u.toast(err.message);
							})
						}
					}
				});

			},
			onDelete(item) {
				uni.showModal({
					title: "提示",
					content: "确定要删除吗？",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: '删除中',
								mask: true
							});
							this.$http.post("/taskList/delete", {
								id: item.id
							}).then((res) => {
								const index = this.list.findIndex(e => e.id === item.id)
								this.list.slice(index, 1)
								uni.hideLoading();
								uni.$u.toast('删除成功');
							}).catch((err) => {
								uni.hideLoading();
								uni.$u.toast(err.message);
							})
						}
					}
				});

			},
			onSliderChanging(value) {
				this.modalForm.integral = Math.round(this.modalForm.total * (value / 100))
			},
			onPopupImages(item) {
				this.popupImages = item;
				this.showImages = true;
			},
		}
	}
</script>

<style>
	.page-main {
		padding: 0;
	}

	.card-list {
		margin: 30rpx;
		padding: 20rpx;
		background-color: antiquewhite;
		border-radius: 15px;
		box-shadow: 1px 2px 5px #c8c8c8;
	}

	.head {
		height: 35px;
		line-height: 35px;
	}

	.main {
		padding-top: 10px;
		padding-bottom: 10px;
	}

	.tail {
		height: 40px;
		line-height: 40px;
	}

	.del-box {
		margin-right: 8px;
	}

	.main-title {
		position: absolute;
		width: 340rpx;
		top: 0;
	}

	.main-integral {
		position: absolute;
		margin-top: 10px;
		bottom: 0;
	}

	.circular {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin: 5px;
	}

	.edit-box {
		width: 60px;
		margin-top: 5px;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	.fixed-add-button {
		position: fixed;
		width: 100%;
		bottom: 0px;

	}
</style>